<template>
	<view>
		<fab-nav-bar background="linear-gradient(90deg, rgba(252,210,102,0.18) 0%, rgba(254,145,105,0.15) 100%) no-repeat rgba(255, 255, 255, 1)" title="常见问题" back-url="/pages/personal/index"></fab-nav-bar>
		<view class="faq-content">
			<view class="faq-search">
				<view class="faq-search-input">
					<input type="text" class="f-input" v-model="searchValue" @input="searchItem" placeholder="搜一搜常见问题" focus confirm-type="search" >
					<uni-icons type="clear" size="20" @click="reset" color="RGBA(189, 189, 189, 1)"></uni-icons>
				</view>
				<view class="faq-search-cancel" @click="cancel">取消</view>
			</view>
			<view>
				<scroll-view
					scroll-y="true"
					refresher-enabled="true" 
					@scrolltolower="loadMore"
					style="height: 100%"
					>
					<view
						v-for="(item,index) in form.dataList" 
						:key="index"
						@click="goTo(`/pages/personal/faq/detail?info=${encodeURIComponent(JSON.stringify(item))}`)">
						<view class="faq-item">{{item.name}}</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import fabNavBar from '@/components/fab-nav-bar/index.vue'
	import { ref,reactive } from 'vue'
	import { getArticle } from '@/common/API/notice'
	
	const isLoadMore = ref(false)
	const searchValue = ref(null)
	const form = reactive({
		pageNo: 1,
		pageSize: 10,
		page: 1,
		dataList: []
	})
	
	const searchItem = () => {
		form.pageNo = 1
		form.pageSize = 10
		form.page = 1
		form.dataList = []
		console.log(searchValue.value)
		if(searchValue.value){
			getProgramList()
		}
	}
	const getProgramList = async () => {
		// uni.showLoading({
		// 	title:'加载中...'
		// });
		let data = {
			pageNo: form.pageNo,
			pageSize: form.pageSize,
			programType: 2,
			keyWord: searchValue.value
		}
		let res = await getArticle(data)
		if(res){
			// uni.hideLoading()
			form.page = res.total? Math.ceil(res.total/form.pageSize) : 1
			form.dataList = res.list
		}
	}
	//加载更多
	const loadMore = () => {
		console.log('上拉加载更多')
		if(form.pageNo >= form.page){
			return
		}
		form.pageNo ++
		isLoadMore.value = true;
		getProgramList()
		setTimeout(() => {
			isLoadMore.value = false;
		}, 2000)
	}
	const reset = () => {
		searchValue.value = ""
		form.pageNo = 1
		form.pageSize = 10
		form.page = 1
		form.dataList = []
	}
	const cancel = () => {
		uni.navigateBack({
			delta: 1
		})
	}
	const goTo = (url:any)=>{
		uni.navigateTo({
			url: url
		})
	}
	
</script>
<style>
	page{
		height: 100%;
		background: rgba(255,255,255,1)
	}
</style>
<style lang="scss" scoped>
	.faq-content{
		padding: 0 32rpx 0 32rpx;
		.faq-search{
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: relative;
			padding: 10rpx 0 24rpx 0;
			.faq-search-input{
				flex: 1;
				background: rgba(245, 245, 245, 1);
				padding: 0 26rpx;
				display: flex;
				align-items: center;
				display: flex;
				border-radius: 8rpx;
				.f-input{
					font-size: 26rpx;
					flex: 1;
				}
			}
			.faq-search-cancel{
				margin-left: 22rpx;
				font-size: 28rpx;
				color: rgba(17, 17, 17, 1);
			}
		}
		.faq-item{
			font-size: 30rpx;
			padding: 26rpx 6rpx;
			color: #000;
			position: relative;
		}
		.faq-item::before,.faq-search::before{
			content: " ";
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 1rpx;
			border-top: 1rpx solid rgba(229, 229, 229, 0.5);
		}
	}
</style>